<template>
  <div class="home">
    <div class="search">
      <a-input-group compact>
        <a-input v-model="search_value" placeholder="搜索公司或职位" style="width: calc(100% - 200px)" />
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </a-input-group>
    </div>
    <div class="carousel">
      <a-carousel arrows autoplay >
        <div v-for="(p, i) of imges " :key="i" ><a :href="p.url"><img  :src="p.img"></a></div>
      </a-carousel>
    </div>
    <div>
      <h2>--热门职位--</h2>
    </div>
    <div class="hotJob">
      <div class="jobCard" @click="toDetail(p.jobId)" v-for="(p,i) of jobs" :key="i">
        <div class="job_header">
          <h3>{{p.jobName}}</h3>
          <span><b>薪资：</b>{{(p.minWage/1000).toFixed(1)}}k-{{(p.maxWage/1000).toFixed(1)}}k</span>
        </div>
        <span>{{p.jobCity}}</span>| &nbsp;&nbsp;
        <span>需要：{{p.jobNum}} 人</span>
        <hr>
        <div class="footer">
          <div class="img ">
            <img :src="p.logo" alt="">
          </div>
          <div>{{p.compName}}</div>| &nbsp;&nbsp;
          <div>{{COMPTYPEMAP[p.compType]}}</div>| &nbsp;&nbsp;
          <div>{{COMPPEOPLEMAP[p.compPeople]}}</div>
        </div>
      </div>
    </div>
    <div>
      <h2>--热门企业--</h2>
    </div>
    <div class="hotComp">
      <div class="CompCard" @click="toCompDetail(p.id)" v-for="(p,i) of comps" :key="i">
        <div class="img">
          <img :src="p.logo" alt="">
        </div>
        <div class="right">
          <h3>{{p.compName}}</h3>
          <div class="footer">
            <div>{{COMPPEOPLEMAP[p.peopleNum]}}</div>&nbsp;&nbsp;|&nbsp;&nbsp;
            <div>{{COMPTYPEMAP[p.compType]}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import './styles.less'
import jobAPI from '../../services/job'
import compAPI from '../../services/comp'
import { requestWrapper } from '../../utils/request'
import {COMPTYPEMAP, COMPPEOPLEMAP} from '../../const/const'
export default {
  data() {
    return {
      COMPTYPEMAP: COMPTYPEMAP,
      COMPPEOPLEMAP: COMPPEOPLEMAP,
      search_value: '',
      jobs: [],
      comps: [],
      imges:[]
    };
  },
  methods: {
    onSearch(v) {
      console.log(v);
      this.$router.push({
        path: '/job',
        query: {
          search_value: this.search_value
        }
      });
    },
    onChange(current) {
      console.log(current);
    },
    toDetail(id) {
      this.$router.push({
        path: '/job_detail',
        query: {
          jobId: id
        }
      });
    },
    toCompDetail(id) {
      this.$router.push({
        path: '/comp_detail',
        query: {
          compId: id
        }
      });
    }
  },
  mounted() {
    requestWrapper( jobAPI.jobs.bind(null, {pageSize: 6}), {
      formatDataFn: res => res.result,
    }).then((res) => {
        console.log(res);
        this.jobs = res.JobList
    })

    requestWrapper( compAPI.comps.bind(null, {pageSize: 8}), {
      formatDataFn: res => res.result.list,
    }).then((res) => {
        console.log(res);
        this.comps = res
    })
    requestWrapper( jobAPI.getRotation.bind(null), {
      formatDataFn: res => res,
    }).then((res) => {
        this.imges = res.result
    })
  },
}
</script>
